import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  //重写初始化方法--->没用
  // @override
  // void initState() {
  //   super.initState();
  //   //强制横屏
  //   OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
  // }
  late TabController tabController;


  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 1, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    List<FlSpot> spots1 = [
      FlSpot(1, 1),
      FlSpot(3, 1.5),
      FlSpot(5, 1.4),
      FlSpot(7, 3.4),
      FlSpot(9, 2),
      FlSpot(11, 2.2),
      FlSpot(13, 1.8),
    ];
    // 第二条线
    List<FlSpot> spots2 = [
      FlSpot(2, 1),
      FlSpot(4, 1.5),
      FlSpot(6, 1.4),
      FlSpot(8, 3),
      FlSpot(10, 1.6),
      FlSpot(12, 2.2),
    ];
    LineChart lineChartOne = LineChart(LineChartData(
        minX: 0,
        maxX: 20,
        minY: 0,
        maxY: 5,
        titlesData: FlTitlesData(
          //设置坐标轴 样式
          show: true,
          leftTitles: SideTitles(
            showTitles: true,
            getTitles: (value) {
              if (value.toInt() % 1 == 0) {
                return value.toInt().toString();
              }
              return '';
            },
          ),
          rightTitles: SideTitles(
            showTitles: true,
            getTitles: (value) {
              if (value.toInt() % 2 == 0) {
                return value.toInt().toString();
              }
              return '';
            },
          ),
          topTitles: SideTitles(showTitles: false),
          // rightTitles: SideTitles(showTitles: false),
          bottomTitles: SideTitles(
              showTitles: true,
              getTitles: (value) {
                if (value.toInt() % 2 == 0) {
                  return value.toInt().toString();
                }
                return '';
              }), //设置坐标间隔为2
        ),
        //borderData: FlBorderData(border: Border),
        clipData: FlClipData(
            top: false, bottom: false, left: false, right: true), //不知道什么用途
        // axisTitleData: FlAxisTitleData(
        //   //设置图标四周的标题标题,标题在另一行的中间
        //   show: true,
        //   topTitle: AxisTitle(
        //       showTitle: true, titleText: '温度(°)', textAlign: TextAlign.left),
        //
        //   //leftTitle: AxisTitle(showTitle: true, titleText: '温度(°)'),
        //   //bottomTitle: AxisTitle(showTitle:true,titleText: '时间'),
        //   // rightTitle: AxisTitle(
        //   //   showTitle: true,
        //   //   titleText: '压力(kPa)',
        //   //   textAlign: TextAlign.end,
        //   //   textStyle: TextStyle(),
        //   // ),
        // ),
        gridData: FlGridData(show: false), //不显示网格线
        //titlesData: FlTitlesData(show: true,leftTitles: SideTitles(getTitles: 2.5)),
        lineBarsData: [
          LineChartBarData(
            isCurved: true, //绘制为曲线
            dotData: FlDotData(show: false),
            colors: [Colors.blue, Colors.green],
            spots: spots1,
          ),
          LineChartBarData(
            isCurved: true,
            dotData: FlDotData(show: false), //不显示结点
            colors: [Colors.green], //绘制颜色列表，一个单一色，多个，渐变色
            spots: spots2,
          )
        ]));
    LineChart lineChartTwo = LineChart(LineChartData(
        minX: 0,
        maxX: 20,
        minY: 0,
        maxY: 5,
        titlesData: FlTitlesData(
          //设置坐标轴 样式
          show: true,
          // leftTitles: SideTitles(
          //     showTitles: true,
          //     getTitles: (text) {
          //       return '${text.toString()}°';
          //     }),
          topTitles: SideTitles(showTitles: false),
          // leftTitles: SideTitles(showTitles: false),
          bottomTitles: SideTitles(
              showTitles: true,
              getTitles: (value) {
                if (value.toInt() % 2 == 0) {
                  return value.toInt().toString();
                }
                return '';
              }), //将坐标轴上的数据进行间隔处理
        ),
        clipData: FlClipData(
            top: false, bottom: false, left: false, right: true), //不知道什么用途
        axisTitleData: FlAxisTitleData(
          //设置坐标轴标题,标题在另一行的中间
          show: true,
          topTitle: AxisTitle(
              showTitle: true,
              titleText: '压强(kPa)',
              textAlign: TextAlign.right),

          //leftTitle: AxisTitle(showTitle: true, titleText: '温度(°)'),
          //bottomTitle: AxisTitle(showTitle:true,titleText: '时间'),
          // rightTitle: AxisTitle(
          //   showTitle: true,
          //   titleText: '压力(kPa)',
          //   textAlign: TextAlign.end,
          //   textStyle: TextStyle(),
          // ),
        ),
        gridData: FlGridData(show: false), //不显示网格线
        //titlesData: FlTitlesData(show: true,leftTitles: SideTitles(getTitles: 2.5)),
        lineBarsData: [
          LineChartBarData(
            isCurved: true, //绘制为曲线
            dotData: FlDotData(show: false),
            colors: [Colors.yellow, Colors.teal],
            spots: spots2,
          ),
          // LineChartBarData(
          //   isCurved: true,
          //   spots: spots2,
          // )
        ]));
    Widget top = Container(
      height: 50,
      width: 350,
      alignment: AlignmentDirectional.topCenter,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          TextButton.icon(
              onPressed: () {},
              icon: Icon(
                Icons.timeline,
                color: Colors.green,
              ),
              label: Text("内室压力")),
          TextButton.icon(
              onPressed: () {},
              icon: Icon(
                Icons.timeline,
                color: Colors.blue,
              ),
              label: Text("内室温度")),
          OutlinedButton(
            onPressed: () {},
            child: Text('打印',style: TextStyle(color: Colors.black),),
            style: ButtonStyle(
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.grey, width: 1)),
            ),
          ),
          OutlinedButton(
            onPressed: () {},
            child: Text('刷新',style: TextStyle(color: Colors.black),),
            style: ButtonStyle(
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.grey, width: 1)),
            ),
          ),
        ],
      ),
    );
    Widget bLeft = SizedBox(
      height: 490,
      width: 300,
      child: RotatedBox(
        quarterTurns: 1, //旋转一次，90°
        child: lineChartOne,
      ),
    );
    Widget bRight = SizedBox(
      height: 485,
      width: 50,
      child: RotatedBox(
        quarterTurns: 1,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Text('温度(°)'), Text('压力(kPa)')],
        ),
      ),
    );
    Widget bottom = SizedBox(
      height: 485,
      width: 350,
      child: Row(
        children: [
          bLeft,
          bRight,
        ],
      ),
    );

    return Scaffold(
      backgroundColor: Colors.white30,
      appBar: AppBar(
        toolbarHeight: 30, //设置高度
        title: Text('纯蒸汽发生器05'),
        centerTitle: true,
        leading: Icon(Icons.keyboard_arrow_left),
        actions: [IconButton(onPressed: (){}, icon: Icon(Icons.error_outline))],
        bottom: TabBar(
          tabs: [Tab(text: '趋势图',)],
        controller: tabController,
          indicatorWeight: 1,
        ),
      ),
      body: Container(
          color: Colors.white54,
          margin: EdgeInsets.all(20),
          height: 540,
          width: 350,
          child: Center(
            child: Column(
              children: [
                top,
                Divider(
                  height: 2,
                  color: Colors.black,
                ),
                bottom
              ],
            ),
          )
          // RotatedBox(
          //   quarterTurns: 1, //旋转次数，一次90°
          //   child: Center(
          //     child: Container(
          //       margin: EdgeInsets.all(20),
          //       color: Colors.white70,
          //       child: Stack(
          //          alignment: AlignmentDirectional.topCenter,
          //          children: [
          //            lineChartOne,
          //            lineChartTwo,
          //          ],
          //        ),
          //       //不用层叠布局
          //
          //     ),
          //   ),
          // ),
          ),
    );
  }
}
//fl_charts

